{% extends "CmsBundle::base.html.twig" %}

{% block  pluginStyles %}
    <link rel="stylesheet" href="/assets/cms/css/dropzone.min.css" />
{% endblock %}

{% block pageContent %}

    <!-- PAGE CONTENT BEGINS -->
    <div class="alert alert-info">
        <i class="ace-icon fa fa-hand-o-right"></i> 上传文件后请编辑文件信息！

        <button class="close" data-dismiss="alert">
            <i class="ace-icon fa fa-times"></i>
        </button>
    </div>

    <div>
        <form action="{{ path("yearnfar_cms_image_upload") }}" class="dropzone" id="dropzone">
            <div class="fallback">
                <input name="file" type="file" multiple="" />
            </div>
        </form>
    </div><!-- PAGE CONTENT ENDS -->

{% endblock %}

{% block pluginScripts %}
    <script src="/assets/cms/js/dropzone.min.js"></script>
{% endblock %}

{% block inlineScripts %}
    <script type="text/javascript">
        jQuery(function($){

            try {
                Dropzone.autoDiscover = false;
                var myDropzone = new Dropzone("#dropzone" , {
                    paramName: "file", // The name that will be used to transfer the file
                    maxFilesize: 10, // MB

                    addRemoveLinks : true,
                    dictDefaultMessage :
                            '<span class="bigger-150 bolder"><i class="ace-icon fa fa-caret-right red"></i> 拖拽 </span> 上传 \
                            <span class="smaller-80 grey">(或 点击)</span> <br /> \
                            <i class="upload-icon ace-icon fa fa-cloud-upload blue fa-3x"></i>'
                    ,
                    dictResponseError: '上传文件发生错误！',

                    //change the previewTemplate to use Bootstrap progress bars
                    previewTemplate: "<div class=\"dz-preview dz-file-preview\">\n  <div class=\"dz-details\">\n    <div class=\"dz-filename\"><span data-dz-name></span></div>\n    <div class=\"dz-size\" data-dz-size></div>\n    <img data-dz-thumbnail />\n  </div>\n  <div class=\"progress progress-small progress-striped active\"><div class=\"progress-bar progress-bar-success\" data-dz-uploadprogress></div></div>\n  <div class=\"dz-success-mark\"><span></span></div>\n  <div class=\"dz-error-mark\"><span></span></div>\n  <div class=\"dz-error-message\"><span data-dz-errormessage></span></div>\n</div>"
                });

                $(document).one('ajaxloadstart.page', function(e) {
                    try {
                        myDropzone.destroy();
                    } catch(e) {}
                });

            } catch(e) {
                alert('浏览器不支持Dropzone.js！');
            }

        });
    </script>
{% endblock %}